<template>
  <div>
    <v-btn @click="show=!show">
      Switch
    </v-btn>
    <v-btn
      @click="removeHalf"
      color="error"
    >
      Thanos
    </v-btn>
    <v-btn
      @click="add"
      color="success"
    >
      Add
    </v-btn>
    <v-btn
      @click="remove"
      color="warning"
    >
      Remove
    </v-btn>
    <v-btn
      @click="shuffle"
      color="info"
    >
      Shuffle
    </v-btn>
    <transition
      name="tr"
      enter-active-class="animated rollIn"
      leave-active-class="animated bounceOutRight"
    >
      <transition-group
        name="list"
        tag="p"
        v-show="show"
      >
        <span
          v-for="item in items"
          :key="item"
          class="list-item"
        >{{ item }}</span>
      </transition-group>
    </transition>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  data() {
    return {
      show: true,
      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10
    };
  },
  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length);
    },
    add() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove() {
      this.items.splice(this.randomIndex(), 1);
    },
    removeHalf() {
      for (let i = this.items.length / 2; i >= 0; i--) {
        this.items.splice(this.randomIndex(), 1);
      }
    },
    shuffle() {
      this.items = _.shuffle(this.items);
    }
  }
};
</script>

<style>
@import "../../node_modules/animate.css/animate.min.css";

.list-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.list-leave-active {
  position: absolute;
}
</style>
